<template>
    <section class="wrapper">
      <myHeader :obj="myObj" @events="events"></myHeader>
      <main>
        <div class="bigFace_0315">
          <praise-bar :btnShow="praiseShow"></praise-bar>
          <div class="conterVoice_0315">
            <div v-if="audioTime" class="voice-time">{{audioTime}}</div>
            <div @click="play()" class="voiceIcon_0315" :class="contentObj.Type == 2?'videoIcon': ''"></div>
            <p class="hear_0315">{{(contentObj.IsBuy || contentObj.IsBuy==undefined)?'已购买，点击播放':'未购买'}}</p>
          </div>
          <div class="info_0315">
            <p class="p_0315">{{contentObj.Title}}</p>
              <div class="moneyWrap_0315" @click="goBuy()">
                <span class="money_0315" :class="{'changeColor_0315': contentObj.IsBuy}">{{(contentObj.IsBuy || contentObj.IsBuy==undefined)?'已购买':'￥'+contentObj.Money}}</span>
                <span class="moneyText_0315">购买播放</span>
              </div>
          </div>
        </div>
        <div class="hintVoice_0315" v-if="contentObj.IsBuy == false">
          <div class="hintIcon_0315"></div>
          <p class="hintP_0315">内容需购买查看</p>
        </div>
        <div class="hintVoices_0315" v-if="contentObj.IsBuy">
          {{contentObj.Describe}}
        </div>
        <!-- 评论 -->
        <div class="comment_0309">
          <h2 class="h2_0309">用户评价</h2>
          <div class="userItem_0309" v-for="item in comlist">
            <div class="faceName_0309">
              <i class="face_0309" :style="{background:'url('+ item.FromHeadUrl +') no-repeat center center'}"></i>
              <span class="name_0309">{{item.FromName}}</span>
            </div>
            <p class="userSay_0309">{{item.Content}}</p>
            <div class="chatTitle_0309">{{item.CreateTime.slice(0,10)}}</div>
            <time class="chatTime_0309">{{item.Time}}</time>
          </div>
          <button class="chatBottom_0309">{{comlist.length < 9?"":"查看全部评论"}}</button>
        </div>
        <div class="hide">
          <audio ref="audio" :src="contentObj.VoiceUrl" width="100%" controls="controls"></audio>
          <video ref="video" :src="contentObj.VideoUrl" width="100%" controls="controls">
          </video>
        </div>
      </main>
    </section>
</template>
<script>
import myHeader from './base/myHeader';
import praiseBar from './base/praiseBar';
import hgjSkip from '../assets/js/hgjSkip';
import Apis from '../assets/js/expertApi';
import API from '../assets/js/asktoses';
import { fetch, payUrl } from '../assets/api';
import Client from '../assets/js/common';
export default {
  props:{
    index:{},
    praiseShow:{}
  },
  data () {
    return {
      myObj: {
        type: 3,
        text: '行家'
      },
      obj: {},
      comlist:{},
      contentObj: {
        Describe: '', // 详情
        IsBuy: 1, // 是否已购买
        Kind: '', // 明细种类 0约见信息 1，知识信息
        Type: '', // 类容类型 0.图文（约见必须为图文），1.语音 2.视频
        Money: 0, // 金额
        Title: '', // 标题
        PostMesssageDetailId: '', // 明细id
        VoiceUrl: '', // 音频地址
        VideoUrl: '', // 视频地址
      },
      audioTime:null
    }
  },
  created () {
    let storeData = this.$store.state.detailDatas.MessageDetails;
    this.obj = storeData[this.index];
    hgjSkip.skip().then(res => {
      this.login = res;
      this.commentlist();
    })
    
    this.initFn();
  },
  methods: {
    events(i){
      if(i == 2) {
        this.$store.commit('boxShow', false);
        let clickObj = this.$store.state.clickObj;
        if(clickObj&&clickObj.goBack){
          history.back();
        }
      }
      
    },
    //评论
    async commentlist(){
      const res = await fetch(API.GetPostComment,{
        ...this.login[1],
        PostMesssageDetailId: this.contentObj.PostMesssageDetailId,
        PageIndex:1
      });
      this.comlist = res.Result.Comments;
    },
    initFn(){
      if(this.obj) {
        this.contentObj.Describe = this.obj.Describe;
        this.contentObj.IsBuy = this.obj.IsBuy;
        this.contentObj.Kind = this.obj.Kind;
        this.contentObj.Type = this.obj.Type;
        this.contentObj.Money = this.obj.Money;
        this.contentObj.Title = this.obj.Title;
        this.contentObj.PostMesssageDetailId = this.obj.PostMesssageDetailId;
        this.contentObj.VoiceUrl = this.obj.VoiceUrl;
        this.contentObj.VideoUrl = this.obj.VideoUrl;
      }
    },
    play() {
      if(this.contentObj.IsBuy == false) return;
      let ele = 'audio';
      if(this.contentObj.Type == 2) { // 当前视频
        ele = 'video'
      }else{
        this.$refs.audio.removeEventListener('timeupdate', this.playMusicFunc);
        this.$refs.audio.addEventListener('timeupdate', this.playMusicFunc);
        this.$refs.audio.addEventListener('canplay', () => {
        });
      }
      if(this.$refs[ele].paused){
        this.$refs[ele].play();
      }else{
        this.$refs[ele].pause();
      }
    },
    playMusicFunc(e) {
      let currentTime = e.target.currentTime,
          duration = e.target.duration;
      let distanTime = parseInt(duration - currentTime);
      this.audioTime = Math.floor(distanTime/60)+":"+(distanTime%60/100).toFixed(2).slice(-2);
    },
    async goBuy(){
     
      if(this.contentObj.IsBuy != false) return;
       
      let r = await Apis.createDryGoodsDealOredr({...this.login[1],'PostMessageDetailId': this.contentObj.PostMesssageDetailId}).catch(Res => {
       
      })
      if(!r) return;
      let urls = location.href;
      if(urls.indexOf('?')){
        urls = urls.split('?')[0];
      }
      let str = '?';
      str +='appid='+ r.Result.AppId; // 应用Id
      str +='&channel_code='+ r.Result.ChannelCode;   // 销售渠道码,一般为会管家平台传递给应用的展会识别码
      str +='&pay_userid='+ r.Result.PayUserId // '1c780d87-80d4-44cb-9f70-5c9f318e9793'; //data.Result.PayUserId;  // 购买应用的会管家平台用户ID
      str +='&out_order_no='+ r.Result.DealOrderNo; // 订单编号,必须保证唯一,回调将回传
      str +='&subject='+ r.Result.Subject;    // 商品名称
      str +='&total_fee='+ r.Result.TotalFee;   // 商品的价格,以分为单位,比如一元传 100
      str +='&subjectdec='+ r.Result.Subjectdec; // 商品的描述
      str +='&CustomStr='+ r.Result.CustomStr; // 客户自带参数,支付原样返回
      str +='&sign='+ r.Result.Sig;    // 签名
      str +='&Notifyurl='+ encodeURIComponent(urls); // 支付成功同步跳转地址,使用 urlencode 加密,不传则会跳转至应用配置地址
      window.location.href = payUrl+str;
    },
  },
  components: {
    myHeader,
    praiseBar
  }
}

</script>
<style lang="less">
.wrapper {
  width: 3.75rem !important;
  height: 100% !important;
  main {
    width: 3.75rem;
    height: 100%;
    padding-top: .44rem;
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: auto;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    .hide {
      height: 0rem;
      overflow: hidden;
    }
    .comment_0309 {
        padding: .14rem;
        background: white;
        .h2_0309 {
          padding-bottom: .1rem;
        }
        .userItem_0309 {
          padding-top: .14rem;
          box-sizing: border-box;
          .faceName_0309 {
            width: 100%;
            display: flex;
            margin-bottom: .12rem;
            .face_0309 {
              display: block;
              width: .3rem;
              height: .3rem;
              background: url("../assets/img/my@3x.png") center center;
              background-size: cover !important;
              background-repeat: no-repeat;
              border-radius: 50%;
            }
            .name_0309 {
              display: block;
              width: 3rem;
              height: .3rem;
              line-height: .3rem;
              padding-left: .1rem;
              box-sizing: border-box;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
              color: #39393D;
              font-size: .12rem;
              font-weight: bold;
            }
          }
          .userSay_0309 {
            color: #39393D;
            font-size: .12rem;
            line-height: 1.5;
            text-align: justify;
          }
          .chatTitle_0309 {
            font-size: .12rem;
            line-height: .12rem;
            color: #828282;
            padding: .1rem 0;
          }
          .chatTime_0309 {
            font-size: .12rem;
            color: #828282;
          }
        }
        .chatBottom_0309 {
          display: block;
          width: 3.47rem;
          height: .44rem;
          font-size: .12rem;
          color:#39393D;
          border: none;
          background: white;
          border-top: 1px solid #ddd;
        }
      }
    .hintVoices_0315 {
      padding: .1rem .15rem;
      background: white;
      color: #39393D;
      font-size: .12rem;
      line-height: .18rem;
      text-align: justify;
    }
    .hintVoice_0315 {
      background: white;
      padding-top: .2rem;
      .hintIcon_0315 {
        width: .93rem;
        height: .93rem;
        border-radius: 50%;
        background: url("../assets/img/expert/icon_ao@3x.png") center center;
        background-size: cover;
        background-repeat: no-repeat;
        margin: 0 auto;
      }
      .hintP_0315 {
        padding: .11rem 0 .4rem;
        font-size: .16rem;
        color: #39393D;
        font-weight: 500;
        text-align: center;
      }
    }
    .bigFace_0315 {
      width: 100%;
      height: 5.24rem;
      background: #39393D;
      background-size: cover;
      position: relative;
      .conterVoice_0315 {
        width: 100%;
        position: relative;
        top: 50%;
        margin-top: -1.1rem;
        height: 1.46rem;
        .voice-time{
          color: #fff;
          text-align: center;
          font-size: .2rem;
          padding-bottom:.18rem;
        }
        .voiceIcon_0315 {
          width: 1rem;
          height: 1rem;
          background: url("../assets/img/expert/icon_language-max@3x.png") center center;
          background-size: cover;
          background-repeat: no-repeat;
          margin: 0 auto;
        }
        .videoIcon {
          background: url("../assets/img/expert/icon_game@3x.png") center center;
          background-size: cover;
          background-repeat: no-repeat;
        }
        .hear_0315 {
          padding-top: .18rem;
          text-align: center;
          font-size: .2rem;
          color: white;

        }
      }
      .info_0315 {
        width: 3.75rem;
        min-height: .6rem;
        position: absolute;
        left: 0;
        bottom: 0;
        // background: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 .14rem;
        box-sizing: border-box;
        .p_0315 {
          width: 2rem;
          height: .22rem;
          line-height: .22rem;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          font-size: .18rem;
          color:white;
          font-weight: bold;
        }
        .moneyWrap_0315 {
          .changeColor_0315 {
            color: #828282!important;
          }
          .money_0315 {
            font-size: .2rem;
            font-weight: bold;
            height: .3rem;
            line-height: .3rem;
            color: #39393D;
            display: inline-block;
            background: #EFEFEF;
            padding: 0 .15rem;
            border-radius: .15rem;
          }
          .moneyText_0315 {
            padding-top: .05rem;
            display: block;
            text-align: center;
            font-size: .09rem;
            color: #fff;
            box-sizing: border-box;
          }

        }
      }
    }
  }

}
  
</style>
